Network diagrams (also called Graphs) show interconnections between a set of entities. Each entity is represented by a Node (or vertice). Connection between nodes are represented through links (or edges). Networks is an entire field of research in itself. For example, you need to set up a layout algorythm that finds out an optimal position for each node. Several type of networks exist. They can be directed (flow) or undirected (connection). Links can be wheigthed or not.
<!-- Include the CanvasXpress library in your HTML file -->
<link rel="stylesheet" href="https://www.canvasxpress.org/dist/canvasXpress.css" type="text/css"/>
<script src="https://www.canvasxpress.org/canvasXpress.min.js"></script>
<!-- Create a canvas element for the chart with the desired dimensions -->
<div>
<canvas id="canvasId" width="600" height="600"</canvas>
</div>
<!-- Create a script to initialize the chart -->
<script>
<!-- Create the data for the graph -->
var data = {
"edges" : [{"color" : "rgb(51,12,255)","endArrow" : "arrow","id1" : "Gene1","id2" : "Gene2","startArrow" : "square","type" : "curved","width" : "3"},{"color" : "rgb(51,12,255)","endArrow" : "arrow","id1" : "Gene4","id2" : "Gene3","startArrow" : "square","type" : "dashedCurved","width" : "3"},{"color" : "rgb(51,12,255)","endArrow" : "arrow","id1" : "Gene5","id2" : "Met","type" : "line","width" : "3"},{"color" : "rgb(51,12,255)","endArrow" : "round","id1" : "Gene3","id2" : "DNA","startArrow" : "square","type" : "bezier","width" : "3"},{"color" : "rgb(51,12,255)","endArrow" : "square","id1" : "Gene7","id2" : "Gene1","startArrow" : "arrow","type" : "dashedBezier","width" : "3"},{"color" : "rgb(51,12,255)","elbows" : [
[235,100],
[50,100],
[50,230]
],
"endArrow" : "square",
"id1" : "Gene5",
"id2" : "Gene7",
"type" : "dotted",
"width" : "3"
},
{
"color" : "rgb(51,12,255)",
"elbows" : [[275,100,325,100,325,165],
[325,165,325,270,425,270]
],
"endArrow" : "square",
"id1" : "Gene5",
"id2" : "DNA",
"type" : "bezier",
"width" : "3"
}
],
"legend" : {
"edges" : [{"id" : "edgesLegendId0","text" : "Activate","type" : "arrowHeadLine"}],
"nodes" : [{"color" : "rgb(255,0,0)","id" : "nodesLegendId0","shape" : "sphere","text" : "Gene"}],
"pos" : {
"decorations" : {
"x" : 450,
"y" : 360
},
"edges" : {
"x" : 360,
"y" : -5
},
"nodes" : {
"x" : -5,
"y" : -5
}
},
"text" : [{"id" : "textLegendId0","text" : "Cool Pathway","x" : 150,"y" : 460}]
},
"nodes" : [{"eventless" : true,"height" : 400,"hideLabel" : true,"id" : "Cell","imagePath" : "https : //www.canvasxpress.org/assets/images/cell.png","shape" : "image","width" : 525,"x" : 250,"y" : 250},{"exp1" : 1,"exp2" : 2,"exp3" : 4,"exp4" : {"cl1" : 2,"cl2" : 4,"cl3" : 3},"exp5" : {"cl1" : 12,"cl2" : 1,"cl3" : 5},"height" : 40,"id" : "Gene1","imagePath" : "https : //www.canvasxpress.org/assets/images/prot.png","shape" : "image","width" : 40,"x" : 155,"y" : 160},{"color" : "rgb(255,0,0)","exp1" : 2,"exp2" : 4,"exp3" : 1,"exp4" : {"cl1" : 7,"cl2" : 1,"cl3" : 8},"exp5" : {"cl1" : 1,"cl2" : 11,"cl3" : 8},"id" : "Gene2","shape" : "sphere","size" : 1,"x" : 155,"y" : 340},{"color" : "rgb(255,0,0)","exp1" : 1,"exp2" : 5,"exp3" : 1,"exp4" : {"cl1" : 12,"cl2" : 4,"cl3" : 8},"exp5" : {"cl1" : 3,"cl2" : 7,"cl3" : 5},"id" : "Gene3","shape" : "sphere","size" : 1,"x" : 355,"y" : 160},{"color" : "rgb(255,0,0)","exp1" : 4,"exp2" : 2,"exp3" : 1,"exp4" : {"cl1" : 1,"cl2" : 14,"cl3" : 7},"exp5" : {"cl1" : 2,"cl2" : 1,"cl3" : 15},"id" : "Gene4","label" : "Receptor Gene4","shape" : "sphere","size" : 1,"x" : 355,"y" : 340},{"color" : "rgb(255,0,0)","exp1" : 1,"exp2" : 3,"exp3" : 2,"exp4" : {"cl1" : 4,"cl2" : 4,"cl3" : 8},"exp5" : {"cl1" : 6,"cl2" : 7,"cl3" : 2},"height" : 20,"id" : "Gene5","shape" : "sphere","width" : 20,"x" : 255,"y" : 100},{"height" : 40,"hideLabel" : true,"id" : "Met","imagePath" : "https : //www.canvasxpress.org/assets/images/met.png","shape" : "image","width" : 40,"x" : 255,"y" : 400},{"exp1" : 3,"exp2" : 3,"exp3" : 4,"exp4" : {"cl1" : 2,"cl2" : 14,"cl3" : 1},"exp5" : {"cl1" : 9,"cl2" : 3,"cl3" : 5},"height" : 40,"id" : "Gene7","imagePath" : "https : //www.canvasxpress.org/assets/images/prot7.png","shape" : "image","width" : 40,"x" : 50,"y" : 250},{"height" : 40,"hideLabel" : true,"id" : "DNA","imagePath" : "https : //www.canvasxpress.org/assets/images/dna1.png","shape" : "image","width" : 40,"x" : 450,"y" : 250}]
}
<-- Create the configuration for the graph -->
var config = {
"calculateLayout":"false",
"decorations":[
"exp1",
"exp2",
"exp3"
],
"decorationsPosition":"top",
"decorationsType":"bar",
"graphType":"Network",
"networkFreezeOnLoad":"true",
"nodeFontColor":"rgb(29,34,43)",
"showAnimation":"true",
"showDecorations":"true"
}
<!-- Call the CanvasXpress function to create the graph -->
var cX = new CanvasXpress("canvasId", data, config);
</script>
library(canvasXpress)
nodes=read.table("https://www.canvasxpress.org/data/cX-networkbasic-nodes.txt", header=TRUE, sep="\t", quote="", fill=TRUE, check.names=FALSE, stringsAsFactors=FALSE)
edges=read.table("https://www.canvasxpress.org/data/cX-networkbasic-edges.txt", header=TRUE, sep="\t", quote="", fill=TRUE, check.names=FALSE, stringsAsFactors=FALSE)
canvasXpress(
nodeData=nodes,
edgeData=edges,
calculateLayout=FALSE,
decorations=list("exp1", "exp2", "exp3"),
decorationsPosition="top",
decorationsType="bar",
graphType="Network",
networkFreezeOnLoad=TRUE,
nodeFontColor="rgb(29,34,43)",
showAnimation=TRUE,
showDecorations=TRUE
)
Create New Page